<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String url = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
	
%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>会员列表</title>
    <link rel="stylesheet" href="<%=basePath%>css/AdminLTE.css">
     <link rel="stylesheet" href="<%=basePath%>css/bootstrap.css">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap-table.css">
    <link rel="stylesheet" href="<%=basePath%>css/ionicons.css">
    <link rel="stylesheet" href="<%=basePath%>css/font-awesome.css">
    <link rel="stylesheet" href="<%=basePath%>css/skins/_all-skins.min.css">  
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="<%=basePath%>css/sweetalert/sweetalert.css">
</head>
<body>
  <section class="content-header">
    <h1>
        我的工作台
        <small>消费记录</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>主页</a></li>
        <li><a href="#">我的工作台</a></li>
        <li class="active">消费记录</li>
    </ol>
</section>

<section class="content" style="margin-left: 15px;margin-right: 15px;">
      <div class="row">
        <div class="col-sm-10 form-inline">
            <label for="month" class="control-label">会员编号</label>
            <input class="form-control" id="search_num" type="text" value="" size="6" style="margin-left:5px">
             <label for="month" class="control-label">会员姓名</label>
            <input class="form-control" id="search_name" type="text" value="" size="6" style="margin-left:5px">
            <label for="month" class="control-label">开始时间</label>
            <input class="form-control" id="fromDate" type="date" value="" size="6" style="margin-left:5px">
             <label for="month" class="control-label">结束时间</label>
            <input class="form-control" id="toDate" type="date" value="" size="6" style="margin-left:5px">
             

            <button id="search" type="button" class="btn bg-green">搜索</button>
        </div>

    </div>
     <div class="row" style="margin-top: 15px;">
     <div id="toolbar" class="btn-group">
        </div>
        </div>
         <table id="table" data-toolbar="#toolbar" data-content-type="application/x-www-form-urlencoded">
            <thead>
            <tr>
                <th>全选</th>
                <th>账单编号</th>
                <th>会员编号</th>
                <th>会员姓名</th>
                <th>消费类型</th>
                <th>会员消费前金额</th>
                <th>消费金额</th>                
                <th>会员消费后金额</th>
                <th>备注</th>
                <th>消费时间</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </section>
<script src="<%=basePath%>js/jquery-2.2.3.min.js"></script>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script src="<%=basePath%>js/bootstrap-table.js"></script>
<script src="<%=basePath%>js/jquery.easyui.min.js"></script>
<script src="<%=basePath%>js/sweetalert/sweetalert.min.js"></script>
<script src="<%=basePath%>js/locales/bootstrap-table-zh-CN.js"></script>
<script src="<%=basePath%>js/locales/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">

$("#search").click(function(){
	$("#table").bootstrapTable('refresh');
});
//默认加载时携带参数  
function queryParams(params) { 
	var search_num = $("#search_num").val();
	var fromDate = $("#fromDate").val();
	var toDate = $("#toDate").val();
	var cName = $("#search_name").val();
    var temp = { 
      pageSize: params.limit,  
      pageStart: params.offset, 
      cNum:search_num,
      cName:cName,
      fromDate:fromDate,
      toDate:toDate,
    };  
    return temp;  
  } 
  
$("#table").bootstrapTable({
    url:"<%=basePath%>order/getOrderListByPage.do",
    method: "post",
    striped: true, //是否显示行间隔色
    cache: true, //是否使用缓存，默认为true
    pagination: true, //是否显示分页（*）
    queryParams: queryParams,//传递参数（*）
    sidePagination: "server",
    pageNumber:1, //初始化加载第一页，默认第一页
    pageSize:5,
    pageList: [5, 10, 20], //可供选择的每页的行数（*）
    showColumns: false, //是否显示所有的列
    showRefresh: true,
    minimumCountColumns: 2, //最少允许的列数
    clickToSelect: true, //是否启用点击选中行
    height: null, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    uniqueId: "id", //每一行的唯一标识，一般为主键列
    showToggle:true, //是否显示详细视图和列表视图的切换按钮
    cardView: false, //是否显示详细视图
    detailView: false, //是否显示父子表
    columns: [{
        checkbox: true
    }, {
        field: 'id',
        align: 'center',
        valign: 'middle'
    },{
        field: 'cNum',
        align: 'center',
        valign: 'middle'
    },
    {
        field: 'cName',
        align: 'center',
        valign: 'middle'
    },
    {
        field: 'payType',
        align: 'center',
        valign: 'middle'
    },{
        field: 'moneyBefore',
        align: 'center',
        valign: 'middle'
    }, 
    {
        field: 'totalMoney',
        align: 'center',
        valign: 'middle'
    }, {
        field: 'moneyAfter',
        align: 'center',
        valign: 'middle'
    },   
    {
        field: 'remark',
        align: 'center',
        valign: 'middle'
    }, 
    {
        field: 'payDate',
        align: 'center',
        valign: 'middle'
    }

    ],
});


$("#add_btn").click(function () {
    $("#myModalMsg").modal("show");
});
$("#clsMessage_btn").click(function () {
    $("#myModalMsg").modal("hide");
});

</script>
</body>
</html>